import styled from '@emotion/styled';
import React, { useEffect } from 'react';
import { IBusinessStatus } from '../Context/BusinessContext';
import { useTranslation } from 'react-i18next';

interface GetHandWritingProps {
	img?: string;
	userRole: string;
	status: string;
}

const GetHandWritingContainer = styled.div`
	width: 312px;
	height: 247px;
	background: #fafafb;
	margin: 0 auto;
`;

const GetHandWritingContent = styled.div`
	padding: 20px 20px 0 20px;
`;

const GetHandWritingImageDiv = styled.div`
	width: 272px;
	height: 160px;
	background: #ffffff;
`;

const GetHandWritingImage = styled.img`
	width: 100%;
	height: 100%;
`;

const GetHandWritingText = styled.p`
	font-size: 12px;
	text-align: center;
	margin-top: 18px;
	color: ${(props: { status: string }) => (props.status === IBusinessStatus.IN_PROGRESS ? '#2a2a2a' : props.status === IBusinessStatus.DONE ? '#5ADA8F' : '#ff0000')};
`;

const UserRole = styled.span`
	font-size: 12px;
	color: #666666;
	margin-bottom: 6px;
	visibility: ${(props: { userRole: string }) => (props.userRole === 'normal' ? 'hidden' : '')};
`;

const GetHandWriting = (props: GetHandWritingProps) => {
	const { t } = useTranslation();
	const { img, userRole, status } = props;

	useEffect(() => {}, [props]);

	const getHandWritingStatus = () => {
		switch (status) {
			case IBusinessStatus.IN_PROGRESS:
				return t('client-signature');
			case IBusinessStatus.DONE:
				return t('signature-submitted');
			case IBusinessStatus.CANCEL:
				return t('signature-canceled');
			case IBusinessStatus.REJECTED:
				return t('signature-refused');
			default:
				break;
		}
	};

	return (
		<GetHandWritingContainer>
			<GetHandWritingContent>
				<UserRole userRole={userRole}>{userRole}</UserRole>
				<GetHandWritingImageDiv>{img ? <GetHandWritingImage src={img}></GetHandWritingImage> : null}</GetHandWritingImageDiv>
				<GetHandWritingText status={status}>{getHandWritingStatus()}</GetHandWritingText>
			</GetHandWritingContent>
		</GetHandWritingContainer>
	);
};

export default GetHandWriting;
